<template>
  <el-card shadow="always" style="margin: 30px 0px">
    <el-form ref="form" size="normal" label-width="80px">
      <!-- SPU名称 -->
      <el-form-item label="SPU名称" size="normal">
        <el-input
          placeholder="请你输入SPU名称"
          size="normal"
          v-model="spuInfo.spuName"
        ></el-input>
      </el-form-item>
      <!-- 品牌 -->
      <el-form-item label="品牌" size="normal">
        <el-select placeholder="请选择品牌" v-model="spuInfo.tmId">
          <el-option
            :label="trademark.tmName"
            :value="trademark.id"
            v-for="(trademark, index) in trademarkArr"
            :key="trademark.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- SPU描述 -->
      <el-form-item label="SPU描述" size="normal">
        <el-input type="textarea" v-model="spuInfo.description"></el-input>
      </el-form-item>
      <!-- 照片墙 -->
      <el-form-item label="SPU图片" size="normal">
        <!-- 上传图片组件 
          action:上传图片地址,发请求POST,路径替换为真实接口【/api】，代理服务器不工作！！！
          file-list:展示照片墙需要属性,数组
          list-type:设置照片墙外观
          on-preview	点击文件列表中已上传的文件时的钩子,预览的事件 
        -->
        <el-upload
          action="/api/admin/product/upload"
          list-type="picture-card"
          :file-list="imgArr"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
        >
          <i class="el-icon-upload"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <!-- 销售属性 -->
      <el-form-item label="销售属性" size="normal">
        <el-select
          :placeholder="
            unSelectSaleAttr.length > 0
              ? `还未选择${unSelectSaleAttr.length}个`
              : `没了`
          "
          v-model="saleAttrIdAndName"
        >
          <el-option
            :label="saleAttr.name"
            :value="`${saleAttr.id}:${saleAttr.name}`"
            v-for="(saleAttr, index) in unSelectSaleAttr"
            :key="saleAttr.id"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          size="default"
          icon="el-icon-plus"
          style="margin: 0px 10px"
          :disabled="saleAttrIdAndName ? false : true"
          @click="addSaleAttr"
          >添加销售属性</el-button
        >
        <el-table
          border
          stripe
          style="margin: 10px 0px"
          :data="spuInfo.spuSaleAttrList"
        >
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="saleAttrName" label="属性名" width="100">
          </el-table-column>
          <el-table-column label="属性值名称列表" width>
            <!--row:销售属性 -->
            <template slot-scope="{ row, $index }">
              <el-tag
                :key="item.id"
                v-for="(item, index) in row.spuSaleAttrValueList"
                closable
                @close="row.spuSaleAttrValueList.splice(index, 1)"
                >{{ item.saleAttrValueName }}</el-tag
              >
              <!-- 编辑模式与查看模式切换 -->
              <el-input
                class="input-new-tag"
                ref="cur"
                size="small"
                v-if="row.visite"
                v-model="row.inputValue"
                @blur="blurHandler(row)"
                @keydown.native.enter="blurHandler(row)"
              ></el-input>
              <el-button
                class="button-new-tag"
                size="small"
                v-else
                @click="clickHandler(row)"
                >添加属性值</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="{ row, $index }">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="spuInfo.spuSaleAttrList.splice($index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item size="normal">
        <el-button
          type="primary"
          size="default"
          icon="el-icon-date"
          @click="save"
          >保存</el-button
        >
        <el-button size="default" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //收集用户新增的销售属性的字段[属性的ID与名字]
      saleAttrIdAndName: "",
      //属性:用于存储图片地址
      dialogImageUrl: "",
      //用于控制对话框显示与隐藏
      dialogVisible: false,
      //修改:起始数值空对象,当用户点击修改SPU按钮的时候,当前组件发了请求,将服务器的返回的数据进行替换
      //现在在修改这里,其实收集的数据，收集到服务器返回对象身上!!!!
      //如果新增：实质收集到spuInfo初始这个对象身上!!!!
      spuInfo: {
        category3Id: "",
        spuName: "",
        tmId: "",
        description: "",
        spuImageList: [
          // {
          //   imgName: "",
          //   imgUrl: "",
          // },
        ],
        spuSaleAttrList: [
          // {
          //   baseSaleAttrId: "", //销售属性的ID
          //   saleAttrName: "", //销售属性的名称
          //   spuSaleAttrValueList: [
          //     {
          //       baseSaleAttrId: "",
          //       saleAttrValueName: "",
          //     },
          //   ],
          // },
        ],
      },
      //某一个SPU照片墙的数据
      imgArr: [],
      //品牌的数据
      trademarkArr: [],
      //全部的销售属性
      allSaleAttr: [],
    };
  },
  methods: {
    //添加SKU的时候,次子组件需要发两个请求【获取品牌的数据、全部销售属性】
    async initData(c3) {
      this.spuInfo.category3Id = c3;
      //第1:获取全部品牌的数据
      let p1 = this.$http.spu.reqTradeMark();
      //第2个:获取整个项目全部SPU，全部销售属性
      let p2 = this.$http.spu.reqAllSaleAttr();
      let result = await Promise.all([p1, p2]);
      this.trademarkArr = result[0].data;
      this.allSaleAttr = result[1].data;
    },

    //照片墙删除的回调
    handleRemove(file, fileList) {
      //file:删除那张图片信息
      //fileList:删除以后剩余的图片信息,剩余图片信息，收集数据吗?
      this.imgArr = fileList;
    },
    //起始这是图片预览的效果
    handlePictureCardPreview(file) {
      //用VC保存一下图片地址
      this.dialogImageUrl = file.url;
      //保存图片的地址，显示对话框
      this.dialogVisible = true;
    },
    //图片上传成功的回调
    handleSuccess(response, file, fileList) {
      //收集新增图片以后全部图片
      this.imgArr = fileList;
    },
    //获取SPU信息的方法
    async initSpuData(spu) {
      //发请求:获取相应SPU数据
      //第一个:SPU[华为、苹果]基本信息
      let p1 = this.$http.spu.reqSpuInfo(spu.id);
      //第二个:获取当前SPU[华为、苹果]图片列表
      let p2 = this.$http.spu.reqSpuImgList(spu.id);
      //第三个:获取全部品牌的数据
      let p3 = this.$http.spu.reqTradeMark();
      //第四个:获取整个项目全部SPU，全部销售属性
      let p4 = this.$http.spu.reqAllSaleAttr();
      //获取SPU相关的数据存储数据
      let result = await Promise.all([p1, p2, p3, p4]);
      this.spuInfo = result[0].data;
      //当前element-ui人家照片墙要的数据[{name:'xxx',url:'yyyy'}]
      this.imgArr = result[1].data.map((item) => {
        return {
          name: item.imgName,
          url: item.imgUrl,
        };
      });
      this.trademarkArr = result[2].data;
      this.allSaleAttr = result[3].data;
    },
    //点击添加销售属性
    addSaleAttr() {
      //准备一个新的销售属性
      const [baseSaleAttrId, saleAttrName] = this.saleAttrIdAndName.split(":");
      let newSaleAttr = {
        baseSaleAttrId,
        saleAttrName,
        spuSaleAttrValueList: [],
      };
      //添加到参数里面【到时候发给服务器参数里面】
      this.spuInfo.spuSaleAttrList.push(newSaleAttr);
      //曾经收集的数据清空
      this.saleAttrIdAndName = "";
    },
    //添加属性值按钮的回调
    clickHandler(spu) {
      //给每一个销售属性添加visite属性，控制编辑与查看模式切换
      //$set,给响应式对象添加响应式属性[数据变化视图跟着变化]
      this.$set(spu, "visite", true);
      //收集表单数据,将来的属性的属性值[将来属性值要带给服务器]
      this.$set(spu, "inputValue", "");
      //表单聚焦
      this.$nextTick(() => {
        this.$refs.cur.focus();
      });
    },
    blurHandler(saleAttr) {
      //非法情况:属性值为空的
      if (saleAttr.inputValue.trim() == "") {
        this.$message({ type: "warning", message: "亲属性值不能为空" });
        return;
      }

      //非法情况:新增的属性值不能重名
      let repeat = saleAttr.spuSaleAttrValueList.find((item) => {
        return item.saleAttrValueName == saleAttr.inputValue;
      });

      if (repeat) {
        this.$message({ type: "warning", message: "亲属性值已有" });
        return;
      }

      //整理属性值参数
      let saleAttrValue = {
        baseSaleAttrId: saleAttr.baseSaleAttrId,
        saleAttrValueName: saleAttr.inputValue,
      };
      //给当前销售属性新增属性值将来带给服务器
      saleAttr.spuSaleAttrValueList.push(saleAttrValue);
      //变为查看模式
      saleAttr.visite = false;
    },
    //保存业务
    async save() {
      //整理参数
      //图片的参数
      this.spuInfo.spuImageList = this.imgArr.map((item) => {
        return {
          imgName: item.name,
          //分情况
          imgUrl: (item.response && item.response.data) || item.url,
        };
      });

      try {
        //发请求进行修改或者是添加
        await this.$http.spu.reqAddOrUpdateSpu(this.spuInfo);
        this.$message({
          type: "success",
          message: this.spuInfo.id ? "修改成功" : "添加成功",
        });
        
        //通知父组件切换场景:目前不管是添加|修改，通知父组件切换场景！！！
        //父组件需要区分添加|修改保存按钮
        this.$emit("changeScene",{scene:0,flag:this.spuInfo.id?'update':'add'});
        //保存按钮:处理完业务【发请求】,清空数据
        Object.assign(this._data, this.$options.data());
     
 

      } catch (error) {}
    },
    //取消按钮的业务
    cancel() {
      //通知父组件切换场景为0
      this.$emit("changeScene",{scene:0,flag:this.spuInfo.id?'update':'add'});
      //取消:清空数据
      //第一种:最笨的方法,挨个清理
      //第二种手段:Object.assign方法,将对象进行合并!!!!
      Object.assign(this._data, this.$options.data());
    },
  },
  //计算属性:算出当前SPU还没有销售属性
  computed: {
    //当前SPU还没有销售属性
    unSelectSaleAttr() {
      //过滤出当前SPU还没有的销售属性[颜色、版本、尺寸]
      //当前类:[版本]
      let result = this.allSaleAttr.filter((item) => {
        return this.spuInfo.spuSaleAttrList.every((item1) => {
          return item.name != item1.saleAttrName;
        });
      });

      return result;
    },
  },
};
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
